<nz-card>
  <nz-descriptions
    nzTitle="基础信息"
    nzBordered
    nzSize="middle"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="优惠券名称">
      {{ basicInfos?.name || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠券ID">
      {{ basicInfos.id || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="类型">
      {{ basicInfos.type === 1 ? '满减券' : '折扣券' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="状态">
      <span
        *ngIf="basicInfos.status"
        [ngStyle]="{'color': basicInfos.status | customizedCouponStatus: 'color'}">
        {{ basicInfos.status | customizedCouponStatus: 'label' }}
      </span>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="优惠方式">
      <!-- {{ basicInfos?.shortName || '-' }} -->
      订单满{{ basicInfos?.orderLimitMoney || '0' }}元<span *ngIf="basicInfos.type === 1">减{{ basicInfos?.limitSmall || '0' }}</span>
      <span *ngIf="basicInfos.type === 2">打{{ basicInfos?.limitSmall || '0' }}折，最高减免{{ basicInfos?.limitBig || '0' }}元</span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="适用品类">
      {{ categoryTypeFilter(basicInfos.containsTypes) }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="前端展示">
      <span [ngStyle]="{'color': basicInfos?.isShowWeb === 0 ? '#F56C6C' : ''}">
        {{ basicInfos?.isShowWeb === 0 ? '不展示' : '展示' }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="领取人限制">
      <div [ngSwitch]="basicInfos.userType">
        <div *ngSwitchCase="0">
          <nz-tag>通用</nz-tag>
        </div>
        <div *ngSwitchCase="1">
          <nz-tag [nzColor]="'#87d068'">C端</nz-tag>
        </div>
        <div *ngSwitchCase="2">
          <nz-tag [nzColor]="'#2db7f5'">B端</nz-tag>
        </div>
        <div *ngSwitchDefault>-</div>
      </div>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="创建时间">
      {{ basicInfos?.createTime || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="领取时间">
      {{ basicInfos?.getBeginTime }} ~ {{ basicInfos?.getEndTime }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠券有效期" nzSpan="2">
      <ng-container *ngIf="basicInfos?.limitTimeNum === -1;else templateXz">
        {{ basicInfos?.useBeginTime }} ~ {{ basicInfos?.useEndTime }}
      </ng-container>
      <ng-template #templateXz>
        <span>{{ basicInfos?.limitTimeNum === 0 ? '领券当天可用' : '领券当日起' + basicInfos?.limitTimeNum + '天内可用' }}</span>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠券规则(前端可见)" nzSpan="4">
      {{ basicInfos?.useDesc || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="备注(内部可见)" nzSpan="4">
      {{ basicInfos?.remark || '-' }}
    </nz-descriptions-item>
  </nz-descriptions>
</nz-card>

<nz-card class="m-t-4">
  <nz-descriptions
    nzTitle="使用信息"
    nzBordered
    nzSize="middle"
    [nzColumn]="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="发放总量">
      {{ useInfos?.total || '0' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="已领取">
      {{ useInfos?.numberReceived || '0' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="已使用">
      {{ useInfos?.usedNumber || '0' }}
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="用劵总成交额">
      {{ useInfos?.totalTurnover || '0' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠总金额">
      {{ useInfos?.totalDiscountAmount || '0' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="购买商品数">
      {{ useInfos?.paidGoodsNum || '0' }}
    </nz-descriptions-item>
  </nz-descriptions>
</nz-card>